<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas画布</title>
</head>
<body>
<h1>什么是 Canvas？</h1>
<p>
    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
    画布是一个矩形区域，您可以控制其每一像素。
    canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
</p>
<h1>画一个长方形</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
    var can = document.getElementById("myCanvas");
    var ctx = can.getContext("2d");//画2d图形
    ctx.fillStyle="#ff0000";//填充颜色
    ctx.fillRect(0,0,150,75);//从（0,0）位置开始画一个长150宽75的长方形
</script>
<h1>鼠标悬停看到坐标</h1>
<script type="text/javascript">
    //鼠标覆盖，显示坐标
    function cnvs_getCoordinates(e)
    {
        x=e.clientX;
        y=e.clientY;
        document.getElementById("xycoord").innerHTML="坐标: (" + x + "," + y + ")";
    }
    //鼠标移除，清除坐标
    function cnvs_clearCoordinates()
    {
        document.getElementById("xycoord").innerHTML="";
    }
</script>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px
        solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)"
     onmouseout="cnvs_clearCoordinates()">
</div>
<div id="xycoord"></div>
<br><br><br><br><br>
<h1>绘制线条</h1>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas2");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);//起始坐标
    cxt.lineTo(150,50);//连接到坐标
    cxt.lineTo(10,50);//再连接到坐标
    cxt.lineTo(10,10);//连接到初始位置
    cxt.stroke();//结束
</script>
<h1>绘制圆形</h1>
<b>说明</b>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas3");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#ff0000";//填充颜色
    //逆时针画圆
    cxt.beginPath();//开始路径
    /* (圆心X坐标,圆心X坐标,半径,起始角度,结束角度,[true/false]逆时针/顺时针) */
    cxt.arc(25,25,25,0,Math.PI*2,true);
    cxt.closePath();//关闭路径
    cxt.fill();//填充
    //逆时针画弧形
    cxt.beginPath();//开始路径
    cxt.arc(80,25,25,0,Math.PI*2/3,true);
    cxt.closePath();//关闭路径
    cxt.fill();//填充
    //顺时针画弧形
    cxt.beginPath();//开始路径
    cxt.arc(150,25,25,0,Math.PI*2/3,false);
    cxt.closePath();//关闭路径
    cxt.fill();//填充
</script>
<h1>绘制渐变色</h1>
<h2>长方形渐变色</h2>
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas4");
    var cxt=c.getContext("2d");
    // (起始X坐标,起始Y坐标,结束X坐标,结束Y坐标)
    var grd=cxt.createLinearGradient(0,0,100,0);
    grd.addColorStop(0,"#FF0000");//渐变色从0~1
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);//画出长方形显示
</script>
<h2>圆形渐变色</h2>
<canvas id="myCanvas5" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas5");
    var ctx=c.getContext("2d");
    //圆形渐变色
    //(起始X,起始Y,起始半径,结束X,结束Y,结束半径)
    var grd=ctx.createRadialGradient(50,50,10,50,50,30);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,100,100);
</script>
<h1>SVG展示画五角星</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <!-- 多边形 按照坐标顺序连线 -->
    <polygon points="100,10 40,180 190,60 10,60 160,180"
             style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>